<script lang="ts">
import EqInfo from "@/components/equipment/eq-info.vue"

export default {
  components: { EqInfo },
  data() {
    return {
      gonggao: null,
      // gonggao: '小程序版本更新，已移除旧版装备属性。所有计算功能仅可计算0112版本数据。请您知悉。',
      id: 0,
      islandId: 0,
      pps: [],
      islandpps: [],
      current: 1,
      items: ["伊斯大陆版本", "巴卡尔Raid版本"],
      hasShow: [false, true, false]
    }
  },
  onLoad(options) {
    this.id = options.id
    this.islandId = options.island
    if (options.propids) {
      try {
        const ids = options.propids.split("-")
        if (ids && ids.length > 0) {
          this.pps = ids
        }
      } catch (e) { }
    }
    if (options.islandpps) {
      try {
        const ids = options.islandpps.split("-")
        if (ids && ids.length > 0) {
          this.islandpps = ids
        }
      } catch (e) { }
    }
    this.showloading()
  },
  onShareAppMessage() {},
  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        if (!this.hasShow[e.currentIndex]) {
          this.showloading()
          this.hasShow[e.currentIndex] = true
        }
        this.current = e.currentIndex
      }
    },
    showloading() {
      uni.showLoading({
        title: "加载中"
      })
    },
    onloaded() {
      setTimeout(() => {
        uni.hideLoading()
      }, 300)
    }
  }
}
</script>

<template>
  <view>
    <uni-notice-bar v-if="gonggao" show-icon scrollable :text="gonggao" :speed="50" />
    <view v-if="false" class="sss">
      <uni-segmented-control :current="current" :values="items" style-type="button" active-color="#191D24" @clickItem="onClickItem" />
    </view>
    <view class="content">
      <view v-if="hasShow[0]" v-show="current === 0" class="eq-info-box">
        <view v-if="islandId" class="eq-island">
          <EqInfo v-if="islandId" simple :pps="islandpps" :eid="islandId" :version="0" @loaded="onloaded" />
        </view>
        <view class="eq-info">
          <EqInfo :pps="pps" :eid="id" :version="0" @loaded="onloaded" />
        </view>
      </view>
      <view v-show="current === 1" class="eq-info-box">
        <view v-if="islandId" class="eq-island">
          <EqInfo v-if="islandId" simple :pps="islandpps" :eid="islandId" :version="1" @loaded="onloaded" />
        </view>
        <view class="eq-info">
          <EqInfo :pps="pps" :eid="id" :version="1" @loaded="onloaded" />
        </view>
      </view>
    </view>
    <view class="footer" />
  </view>
</template>

<style>
page {
  background-color: #000;
}
</style>

<style scoped lang="scss">
.sss {
  padding: 15px;
}
.adContainer {
  width: calc(100% - 30px);
  padding: 15px;

  .ad-name {
    font-size: 15px;
    margin-bottom: 15px;
    padding-top: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #444;
    position: relative;

    &::after {
      content: "";
      display: block;
      width: 50px;
      height: 5px;
      background-color: #444;
      position: absolute;
      bottom: -3px;
      left: 0;
    }
  }
}

.content {
  padding-top: 30rpx;

  .eq-info-box {
    width: calc(100% - 60rpx);
    margin: 0 auto 0;
    position: relative;
    max-width: 400px;
    font-size: 14px;
    border-radius: 5px;

    .eq-info {
      background-color: rgba(30, 30, 30, 0.7);
      border: 1px solid #444;
    }

    .eq-island {
      background-color: rgba(30, 30, 30, 0.7);
      border: 1px solid #444;
      margin-bottom: 30rpx;
    }
  }

  .eq-from-box {
    width: calc(100% - 60px);
    margin: 0 auto 0;
    position: relative;
    max-width: 400px;
    font-size: 15px;
  }
}

.footer {
  height: 30px;
}
</style>
